<template>
	<div>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav" @click="goBack"></a>
			<h1 class="mui-title">会议室申请</h1>
		</header>
		<div class="meeting otherContent asignCommon" id="leave">
			<form name="form" @submit.prevent="handleSubmit">
				<ul class="mui-table-view commonList require marginBorder">
					<li class="mui-table-view-cell">
						<a class="noRight mui-input-row">
							<label for="">会议名称</label>
							<input type="text" class="input inputcontent" placeholder="请输入(必填)" v-model="meetname" />
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right mui-input-row" @click="meetingType">
							<label for="">会议类型</label>
							<input type="text" class="input inputcontent" name="" placeholder="请选择(必填)" v-model="meettype" readonly />
						</a>
					</li>
				</ul>
				<ul class="mui-table-view commonList require marginBorder">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right mui-input-row" @click="startTime">
							<label for="">开始时间</label>
							<input type="text" class="input inputcontent" placeholder="请选择(必填)" v-model="starttime" readonly>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right mui-input-row" @click="endTime">
							<label for="">结束时间</label>
							<input type="text" class="input inputcontent" placeholder="请选择(必填)" v-model="endtime" readonly>
						</a>
					</li>
				</ul>
				<ul class="mui-table-view commonList require marginBorder">
					<li class="mui-table-view-cell">
						<a class="noRight mui-input-row">
							<label for="">会议地点</label>
							<input type="text" class="input inputcontent" placeholder="请输入(必填)"  v-model="meetplace"/>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="noRight mui-input-row">
							<label for="">会议主持</label>
							<input type="text" class="input inputcontent" placeholder="请输入(必填)"  v-model="meetholder"/>
						</a>
					</li>
				</ul>
				<div class="repair mui-clearfix mui-input-row require">
					<label class="specialLabel">会议内容</label>
					<textarea name="" rows="" cols="" placeholder="请输入(必填)" v-model="meetcontent"></textarea>
				</div>
				<span class="submit">
			        <button>提交</button>
			  </span>
			</form>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import {
		loadFromLocal
	} from '@/service/store';
	import {
		getFlowData
	} from '@/service/getData';
	export default {
		data() {
				return {
					myUser: loadFromLocal("myUser", "obj"),
					meetname: "",
					meettype: "",
					starttime: "",
					endtime: "",
					meetplace: "",
					meetholder: "",
					meetcontent: "",
					instanceId: "",
					WorkflowId: ""
				}
			},
			created(){
//				setInterval(function () { 
//					debugger
//			        if (document.activeElement.className.indexOf('inputcontent') >= 0) {
//			            document.activeElement.scrollIntoViewIfNeeded();     }
//			    }, 300);
				let sRoute = this.$route.params.Id.split('&');
				this.instanceId = sRoute[1] == 'null' ? "" : sRoute[1];
				this.WorkflowId = sRoute[0];
				if(this.instanceId) {
					getFlowData({
						InstanceID: this.instanceId
					}).then((res) => {
						this.meetname = res.data.info['会议名称'];
						this.meettype = res.data.info['会议类型'];
						this.starttime = res.data.info['开始时间'];
						this.endtime = res.data.info['结束时间'];
						this.meetplace = res.data.info['会议地点'];
						this.meetholder = res.data.info['会议主持'];
						this.meetcontent = res.data.info['会议内容'];
						this.WorkflowId = res.data.info.FlowID;
					});
				}
			},
			vuerify: {
				meetname: {
					test: 'required',
					message: '会议名称必填'
				},
				meettype: {
					test: 'required',
					message: '会议类型必填'
				},
				starttime: {
					test: 'required',
					message: '开始时间必填'
				},
				endtime: {
					test: 'required',
					message: '结束时间必填'
				},
				meetplace: {
					test: 'required',
					message: '会议地点必填'
				},
				meetholder: {
					test: 'required',
					message: '会议主持必填'
				},
				meetcontent: {
					test: 'required',
					message: '会议内容必填'
				}

			},
			methods: {
				//会议类型
				meetingType() {
					let self = this;
					let meetingType = new mui.PopPicker();
					meetingType.setData([{
						value: '1',
						text: '重要接待会议'
					}, {
						value: '2',
						text: '常规会议'
					}]);
					meetingType.show(function(selectItems) {
						self.meettype = selectItems[0].text;
					})
				},
				//会议开始时间
				startTime() {
					let self = this;
					//				if(!dtPicker) { //开始
					let dtPicker = new mui.DtPicker({
						type: 'datetime',
						beginDate: new Date("2000-01-01 00:00")
					});
					//				}
					dtPicker.show(function() {
						self.starttime = this.getSelected().text;
						self.endtime = "";
					})
				},
				//会议结束时间
				endTime() {
					let self = this;
					if(self.starttime) {
						//请假结束时间从 选择的开始时间开始
						let dtPicker1 = new mui.DtPicker({
							type: 'datetime',
							beginDate: new Date(self.starttime)
						})
						dtPicker1.show(function() {
							self.endtime = this.getSelected().text;
						})
					}

				},
				handleSubmit() {
					if(this.$vuerify.check()) { // 手动触发校验所有数据
						// do something
						console.log(this.WorkflowId)
						let self = this;
						axios({
							url: window.host + '/Workflow/GeneralApply/Initiate',
							method: 'post',
							data: {
								"userId": this.myUser.userId,
								"schoolId": this.myUser.schoolId,
								"WorkflowId": this.WorkflowId,
								"FormData": JSON.stringify({
									"会议名称": this.meetname,
									"会议类型": this.meettype,
									"开始时间": this.starttime,
									"结束时间": this.endtime,
									"会议地点": this.meetplace,
									"会议主持": this.meetholder,
									"会议内容": this.meetcontent,
									"InstanceID": this.instanceId
								})
							},
							transformRequest: [function(data) {
									// Do whatever you want to transform the data
									let ret = ''
									for(let it in data) {
										ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
									}
									return ret
								}]
								//						headers: {
								//							'Content-Type': 'application/x-www-form-urlencoded'
								//						}
						}).then(function(res) {
							if(res.data.code == 1){
								mui.toast("提交成功！")
								self.$router.push({
									name: 'Office',
									params: {
										token: self.myUser.token,
										schoolId: self.myUser.schoolId,
										userId: self.myUser.userId
									}
								})
							}else{
								mui.toast("提交失败！")
							}	
						})
					} else {
						// 返回直接定义在该对象上的可枚举属性
						for(var i in this.$vuerify.$errors) {
							if(this.$vuerify.$errors.hasOwnProperty(i)) {
								mui.toast(this.$vuerify.$errors[i]);
								return false;
							}
						}
					}
				}
			}
	}
</script>

<style>
	.meeting {
		margin-top: 40px;
	}
	/*.mui-table-view li {
		padding-left: 8px;
	}
	
	.mui-table-view {
		border: none;
	}*/
	
	.mui-input-group {
		background-color: #efeff4;
	}
	
	.mui-table-view {
		margin-bottom: 5px;
	}
	
	.meeting .mui-navigate-right input,
	{
		width: auto;
	}
</style>